<template>
  <div class="ScoreQues">
    <div class="scoreitems">
      打分项： <span class="iconfont icon-jia" @click="addScoreItem()"></span>
      <div class="scoreItem" v-for="(scoreItem, index) in scoreItems" :key="scoreItem.id">
        {{ index + 1 }}.
        <el-input
          v-model="scoreItem.input"
          style="width: 240px"
          placeholder="Please input"
          clearable
        />
        <span
          class="iconfont icon-shanchu"
          @click="deleteScoreItem(scoreItem.id)"
          v-if="scoreItems.length > 1"
        ></span>
      </div>
    </div>
    <div class="scorecount">
      打分等级：
      <div class="setScoreCount">
        <span class="iconfont icon-zengjiashuzi" @click="scoreCount++"></span>
        {{ scoreCount }}
        <span class="iconfont icon-jianshaoshuzi" @click="scoreCount > 2 && scoreCount--"></span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineExpose } from 'vue'

const scoreItems = ref([{ input: '', id: 1 }])
const scoreCount = ref(2)

function addScoreItem() {
  scoreItems.value.push({ input: '', id: Date.now() })
}
function deleteScoreItem(id) {
  scoreItems.value = scoreItems.value.filter((item) => id !== item.id)
}

defineExpose({
  scoreCount,
  scoreItems,
})
</script>

<style lang="less" scoped>
.ScoreQues {
  display: flex;
  .scoreItem {
    margin-top: 5px;
    .icon-shanchu:hover {
      color: red;
    }
  }
  .scorecount {
    margin-left: 180px;
    margin-top: 10px;
    .setScoreCount {
      font-size: 26px;
      font-weight: bold;
    }
  }
}
</style>